<template>
	<view>
		<!-- tab切换 -->
		<view class="tabbar">
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false" 
			 :gutter="160" active-color="#52babf" :bar-width="200" ></u-tabs-swiper>
		</view>
		<view v-if="current==1">
			<uni-list>
				<uni-list-item-menu style="padding-bottom:15rpx;background-color:#faf8f8 ;padding: 30rpx 20rpx;border: 0;" :border="false" direction="row" v-for="item in data" :key="item.id" :title="item.title">
					<!-- 通过header插槽定义列表左侧的图片显示，其他内容通过List组件内置属性实现-->
					<template v-slot:header>
						<view class="uni-thumb">
							<!-- 当前判断长度只为简单判断类型，实际业务中，根据逻辑直接渲染即可 -->
							<image :src="item.imgUrl" mode="aspectFill" style="width: 120rpx;height: 120rpx;"></image>
						</view>
					</template>
					<template v-slot:body>
						<view class="uni-list-item__content">
							<view class="title"><text>{{item.title}}</text></view>
						</view>
					</template>
				</uni-list-item-menu>
			</uni-list>
			<view class="xieyi">
					<u-checkbox  v-model="checked" label-size="20">我已阅读并接受《丁香园使用协议》</u-checkbox>
					<text></text>
			</view>
			<view class="create">
				<u-button :customStyle="{backgroundColor:'#00baad',color:'white',width:'80%'}">创建并绑定</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import uniListItemMenu from '@/components/uni-list-item/uni-list-item-menu.vue'
	import uButton from '@/uview-ui/components/u-button/u-button.vue'
	export default {
		components:{
			uniListItemMenu,
			uButton
		}
		,
		data() {
			return {
				checked:false,
				list: [{
					name: '有丁香园账号'
				}, {
					name: '没有丁香园账号'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 1, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 2, // swiper组件的current值，表示当前那个swiper-item是活动的
				col: 2,
				data: [{
						id: 1,
						title: "您正在使用微信账号 滴滴滴 登录绑定后,请使用微信登录",
						description: "这是课堂描述",
						pingfen: "4.8",
						renshu: 2266,
						imgUrl: "http://www.520touxiang.com/uploads/allimg/2018122414/iseyl22xdva.jpg"
					}
				]
			};
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				console.log(index)
				this.current = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
	
			},
			pageTo(url) {
				this.$u.route(url);
			}
		}
	};
</script>

<style lang="scss">
	page{
		background-color: #faf8f8;
	}
	.uni-thumb{
		margin-right: 20rpx;
	}
	.title{
		font-size: 12px;
		width: 70%;
		line-height: 40rpx;
	}
	.xieyi{
		padding: 50rpx 10rpx;
		text-align: center;
	}

</style>
